<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        height: 100%;
        /* background: #f0f0f0; */
        /* background-image: linear-gradient(to bottom, #333, #fff); */
        background: url(./imgs/九柱/九柱2.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      body {
        margin: 0;
        padding: 0;
      }

      .perspective {
        perspective: 800px;
      }

      img {
        width: 100%;
        height: 100%;
      }

      .wrap {
        margin: 0 auto;
      }

      @keyframes img {
        0% {
          transform: rotateX(-10deg) rotateY(0deg);
        }

        100% {
          transform: rotateX(-10deg) rotateY(360deg);
        }
      }

      .perspective .main {
        position: relative;
        transform-style: preserve-3d;
        width: 130px;
        height: 180px;
        margin-top: 300px;
        transform: rotateX(-10deg);
        /* transition: transform .3s linear; */
        animation: img 10s linear 2s infinite;
      }

      .perspective .main > img {
        position: absolute;
        transform-style: preserve-3d;
        transition: all 1s;
        /* transform: rotateY(0deg) translateY(0px); */

        -webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(
                0,
                0,
                0,
                0
              )
              40%, rgba(0, 0, 0, 0.5) 100%);
      }
    </style>
  </head>

  <body>
    <div class="perspective">
      <div class="wrap main">
        <img draggable="false" src="./imgs/九柱/套图5/岩柱.jpg" alt="" />
        <img draggable="false" src="./imgs/九柱/套图5/恋柱.jpg" alt="" />
        <img draggable="false" src="./imgs/九柱/套图5/水柱.jpg" alt="" />
        <img draggable="false" src="./imgs/九柱/套图5/炎柱.jpg" alt="" />
        <img draggable="false" src="./imgs/九柱/套图5/虫柱.jpg" alt="" />
        <img draggable="false" src="./imgs/九柱/套图5/蛇柱.jpg" alt="" />
        <img draggable="false" src="./imgs/九柱/套图5/霞柱.jpg" alt="" />
        <img draggable="false" src="./imgs/九柱/套图5/音柱.jpg" alt="" />
        <img draggable="false" src="./imgs/九柱/套图5/风柱.jpg" alt="" />
      </div>
    </div>

    <script src="./jQuery/jquery-3.6.1.min.js"></script>
    <script>
      var deg = 0;
      var s = 0;

      var start_x = (last_x = 0);
      var start_y = (last_y = 0);

      $(".main img").each(function (i, vl) {
        deg += 40;
        s += 0.1;
        $(vl).css("transform", `rotateY(${deg}deg) translateZ(350px)`);
        $(vl).css("transition", `transform 1s ease ${s}s`);
      });

      document.querySelector("html").onmousedown = function (e) {
        start_x = e.pageX;
        start_y = e.pageY;

        document.onmousemove = function (e) {
          var move_x = e.pageX - start_x;
          var move_y = e.pageY - start_y;

          last_x = move_x;
          last_y = move_y;

          $(".main").css(
            `transform`,
            `rotateX(${-last_y}deg) rotateY(${last_x}deg)`
          );

          // 鼠标移动时不会选中所有元素
          window.getSelection
            ? window.getSelection().removeAllRanges()
            : document.selection.empty();
        };

        document.onmouseup = function () {
          document.onmousemove = null;
        };
      };
    </script>
  </body>
</html>
